<template>
  <div class="fixed-header fixed-footer shopping-cart">
    <x-header>方案内容</x-header>
    <div class="top-actions">
      <div class="action">
        <router-link to="/hubei11c5" tag="b"><i class="iconfont icon-plus"></i> 手动添加</router-link>
        <b @click="gen(1)"><i class="iconfont icon-dice1"></i> 机选1注</b>
        <b @click="gen(5)"><i class="iconfont icon-dice5"></i> 机选5注</b>
      </div>
      <div class="text-grey py-1">
        <b>距{{current.no | pad}}期截止：</b>
        <countdown :duration="duration" @end="reset"/>
      </div>
    </div>

    <transition-group class="mx-3 relative" name="cart" tag="div">
      <div class="cart-item" :key="item.id" v-for="(item, index) in cart">
        <div class="desc">{{rules[item.rule].name}} {{item.bold ? '胆拖' : ''}} {{item.bets}} 注 {{item.bets * 2}} 元</div>
        <div class="bet tips">
          <i class="iconfont icon-close-o" @click="del(index)"></i>
          <em v-html="stringify(item)"></em>
        </div>
      </div>
    </transition-group>

    <div class="text-grey m-3" style="padding-left: 3.5rem">
      <label class="ui-check"><input type="checkbox" v-model="agree"><i></i> 我已阅读并同意</label>
      <a @click.prevent="toggle('dialog')" href>《服务协议》</a>
      <a class="float-right" @click="empty">清空列表</a>
    </div>

    <popup v-model="dialog" class="dialog-lg dialog-flex" style="height: 75%">
      <div class="scroll-wrapper flex-column grow">
        <iframe class="grow" src="http://r209.chaoshenwan.com/lottery/public/faq/agreement.html"></iframe>
      </div>
      <a class="btn btn-lg btn-danger rad-0" @click="toggle('dialog')">确定</a>
    </popup>

    <checkout :disabled="!agree || !bets" :bets="bets" @checkout="checkout"/>
  </div>
</template>

<script>
import { betContent, compute, gen, rules } from './calculator'
import { get, id, set } from '../../utils/stoage'
import { pad } from '../../utils/filters'
import { Dialog, Popup } from 'vant'
import Countdown from './countdown'
import Checkout from '../widgets/checkout'
import http, { checkout } from '../../http'

var genrule = get('hubei11c5.rule', {rule: 'q1'}).rule

function genToCart (rule, num, cart) {
  genrule = rule
  for (let i = 0; i < num; i++) {
    var groups = gen(rule)
    var bets = compute(groups, rule)
    cart.unshift({groups, rule, bets, id: id()})
  }
  set('hubei11c5.cart', cart)
}

export default {
  components: {Popup, Checkout, Countdown},
  name: 'hubei11c5-cart',
  data: () => ({
    duration: 0,
    current: {},
    dialog: false,
    agree: true,
    signature: get('signature'),
    rules,
    cart: [],
    dis: {} // 倒计时
  }),
  beforeRouteEnter (to, from, next) {
    var cart = get('hubei11c5.cart', [])
    cart.length && (genrule = cart[0].rule)
    var {rule, g} = to.query    // 机选投注
    rule && g && genToCart(rule, g, cart)

    http.post('/highfreq/hubei11c5/current').then(data => {
      next(vm => {
        vm.duration = data.duration
        vm.current = data.current
        vm.cart = cart
      })
    })
  },
  methods: {
    checkout (times) {
      var vm = this
      var bet = betContent(this.cart)
      checkout.call(this, '/highfreq/hubei11c5/bet', 'hubei11c5', {
          lotteryNo: this.current.lotteryNo, bet: JSON.stringify(bet), times
        },
        function () {
          vm.cart = set('hubei11c5.cart', [])
        })
    },
    stringify (item) {
      var [q, w] = item.groups
      return item.bold ?
        `<b>(${q.map(pad).join(' ')}) ${w.map(pad).join(' ')}</b>` :
        `<b>${item.groups.map(g => g.map(pad).join(' ')).join(' | ')}</b>`
    },
    toggle (prop) { this[prop] = !this[prop] },
    empty () {
      Dialog.confirm({title: '清空', message: '您确定要清空购物车？'}).then(() => {
        this.cart = set('hubei11c5.cart', [])
      })
    },
    reset () {
      var prev = this.current.lotteryNo
      http.post('/highfreq/hubei11c5/next', {current: prev}).then(data => {
        var {duration, next} = data
        this.duration = duration
        this.current = next
        Dialog.alert({
          title: '彩期已截止',
          message: `您好，第 <b class="text-red">${prev}</b> 期已截止，当前彩期是 <b class="text-red">${next.lotteryNo}</b>，付款时请确认您选择的期号。`
        })
        setTimeout(Dialog.close, 10000)
      })
    },
    gen (num) {
      genToCart(genrule, num, this.cart)
    },
    del (index) {
      this.cart.splice(index, 1)
      set('hubei11c5.cart', this.cart)
    }
  },
  computed: {
    bets () {
      return this.cart.reduce((prev, curr) => prev + curr.bets, 0)
    }
  }
}
</script>
